<template>
  <div class="white-panel-wrap">
    <div class="header-bar-cm">
      <div class="space">
        <slot name="header" />
      </div>
    </div>
    <div ref="content1" class="white-panel-body">
      <slot />
    </div>
  </div>
</template>

<script>
import ElementResizeDetectorMaker from 'element-resize-detector'

export default {
  name: 'CommonPage',
  data() {
    return {
      // eslint-disable-next-line vue/no-reserved-keys
      height: 600
    }
  },
  computed: {
    HeightSize() {
      return this.height
    }
  },
  mounted() {
    const erd = ElementResizeDetectorMaker({
      strategy: 'scroll'
    })
    const that = this
    that.height = this.$refs.content1.offsetHeight
    erd.listenTo(this.$refs.content1, (element) => {
      const width = element.offsetWidth
      const height = element.offsetHeight
      that.height = height
      that.$nextTick(() => {
        that.$emit('resize', { width: width, height: height })
        that.$emit('input', height)
      })
    })
    this.$nextTick(() => {
      that.$emit('input', that.HeightSize)
    })
  }
}
</script>

<style lang="scss">
.white-panel-wrap {
  .white-panel-body {
    text-align: left;
    position: absolute;
    top: 44px;
    left: 0px;
    right: 0px;
    bottom: 0;
    padding:10px 10px 10px 10px;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
</style>
